/* eslint-disable */
<template>
  <div class="typeBase addType">
    <div class="row">
      <input class="input" v-model="typeModal.name" placeholder="名称" />
    </div>
<!--    <div class="row pickRRow">-->
<!--      <div class="title">半径</div>-->
<!--      <el-slider-->
<!--        :min="10"-->
<!--        :max="100"-->
<!--        size="mini"-->
<!--        class="rPicker"-->
<!--        v-model="typeModal.r"-->
<!--        type="range"-->
<!--        :value="typeModal.r"-->
<!--      ></el-slider>-->
<!--    </div>-->
<!--    <div class="divider"></div>-->
<!--    <div class="row pickColorRow">-->
<!--      <div class="title">颜色</div>-->
<!--      <el-input-->
<!--        size="mini"-->
<!--        class="colorPicker"-->
<!--        v-model="typeModal.color"-->
<!--        type="color"-->
<!--      ></el-input>-->
<!--    </div>-->
    <div class="row">
      <el-button class="el-button" size="mini" v-on:click="wantAddType">添加</el-button>
    </div>
  </div>
</template>

<script>
import { addTypeAPI } from "@/api/kgeditor/typeeditor";

export default {
  name: "addTypeComponent",
  data(){
    return {
      typeModal: {
        name: ""
      },
      KG: this.$parent.$parent.$parent.$parent.$refs.graphComponent.KG,
    }
  },
  methods:{
    wantAddType(){
      // let _this = this;
      if(this.typeModal.name==""){
        this.$message.error("类型名不能为空");
        return;
      }
      if(this.KG.getTypeByName(this.typeModal.name)!=null){
        this.$message.error("类型名称已存在，请换一个名字");
        return;
      }
      this.addType();
    },
    addType(){
      let _this = this;
      addTypeAPI({
        type:_this.typeModal.name,
        kgID: _this.KG.kgInfo.id
      },function(data) {
        _this.KG.addType(
          Number(data),
          _this.typeModal.name,
        );
        _this.$message.success("添加类型成功");
        _this.typeModal.name = "";
      },function(error) {
        _this.$message.error("添加类型失败:"+error);
      },()=>{})
    }
  }

};
</script>

<style scoped>
.input {
  display: block;
  margin: 0 auto;
  width: 85%;
  font-size: 10px;
}
</style>
